<script setup lang="ts">

import type {MemoryInfo} from "~/pojo/MemoryInfo";

const option = ref<ECOption>({
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b}: {c} ({d}%)'
  },
  legend: {
    data: [
      '可用堆内存',
      '已用堆内存',
      'JVM未分配内存',
      'JVM已分配内存',
    ]
  },
  series: [
    {
      name: '单位（MB）',
      type: 'pie',
      selectedMode: 'single',
      radius: [0, '30%'],
      label: {
        position: 'inner',
        fontSize: 14
      },
      labelLine: {
        show: false
      },
      data: [
        {value: 0, name: '可用堆内存'},
        {value: 0, name: '已用堆内存' ,selected: true},
      ]
    },
    {
      name: '单位（MB）',
      type: 'pie',
      radius: ['45%', '60%'],
      labelLine: {
        length: 30
      },
      label: {
        formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
        backgroundColor: '#F6F8FC',
        borderColor: '#8C8D8E',
        borderWidth: 1,
        borderRadius: 4,

        rich: {
          a: {
            color: '#6E7079',
            lineHeight: 22,
            align: 'center'
          },
          hr: {
            borderColor: '#8C8D8E',
            width: '100%',
            borderWidth: 1,
            height: 0
          },
          b: {
            color: '#4C5058',
            fontSize: 14,
            fontWeight: 'bold',
            lineHeight: 33
          },
          per: {
            color: '#fff',
            backgroundColor: '#4C5058',
            padding: [3, 4],
            borderRadius: 4
          }
        }
      },
      data: [
        {value: 1048, name: 'JVM未分配内存'},
        {value: 335, name: 'JVM已分配内存'},
      ]
    }
  ]
})
function setHeapData(max:number,used:number){
  option.value.series[0].data[0].value=(max - used) >>> 20
  option.value.series[0].data[1].value=used >>> 20
}
function setJVMData(max:number,free:number){
  option.value.series[1].data[0].value=free >>> 20
  option.value.series[1].data[1].value=(max - free) >>> 20
  // console.log(free/1024/1024," -----------",(max - free) /1024/1024)

  // console.log(free>>>20)
  // console.log(max>>>20)
}
async function getData(){
  await cFetch<MemoryInfo>('/system/dynamic',{
    auth:true,
    defaultOpts:{
      method:"GET"
    }
  }).then(res=>{
    if(res.code===200){
      let d:MemoryInfo=res.data
      setHeapData(d.maxHeapMemory,d.usedHeapMemory)
      setJVMData(d.jvmmaxMemory,d.jvmfreeMemory)
    }
  })
}
let interval:any
onMounted(function (){
  getData()
  interval=setInterval(()=>{
    getData()
  },2500)
})
onUnmounted(function (){
  if(interval)clearInterval(interval)
})
</script>

<template>
    <VChart :option="option"/>
</template>

<style scoped lang="scss">
</style>